<template>
	<view class="content" v-show="load">
		<scroll-view scroll-y class="scroll">
			<view class="address">
				<view v-if="address!=null" class="address_1">
					<view style="align-items: flex-end;justify-content: space-between;">
						<view class="address_text_1">{{address.receiveName}}</view>
						<view class="address_text_2">{{address.receivePhone}}</view>
					</view>
					<view class="address_text_3">
						{{address.province+' '+address.city+' '+address.area+' '+address.receiveAddress}}
					</view>
				</view>
				<view v-else class="address_4">
					还没有添加地址,去添加

				</view>
				<view class="address_icon" @tap="goAddress()">
					<uni-icon type="arrowright" size="20"></uni-icon>
				</view>
			</view>
			<image src="../../static/bg/top.png" style="background-color: #FFFFFF;padding-top: 20upx;width: 750upx;height: 10px;"></image>
			<view style="flex-direction: column;margin-top: 20upx;">
				<view class="order_item" v-for="(item,index) in orderData.cartVos" :key="index">
					<image :src="item.image" style="width: 150upx;height: 150upx;"></image>
					<view style="flex-direction: column;flex: 1;margin-left: 50upx;">
						<view class="order_item_1">
							<view class="order_item_2">{{item.productName}}</view>
							<view style="color: #333333;">￥{{item.price}}</view>
						</view>
						<view class="order_item_1 margin">
							<view class="order_item_3">
								<view :class="[open==index?'order_item_4_':'order_item_4']">{{item.skuName}}</view>
								<uni-icon @tap="op(index)" :type="open==index?'arrowup':'arrowdown'" size="15" color="#888888"></uni-icon>
							</view>
							<view style="color: #888888;">x{{item.count}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="item" style="margin-top: 30upx;">
				<view class="item_text_1">优惠券</view>
				<view class="item_1">
					<view style="color: #888888;" v-if="couponId!=null">{{orderData.couponName}}</view>
					<view class="item_text_2" v-else-if="orderData.couponCount!=0">{{orderData.couponCount}}张可用</view>
					<view style="color: #888888;" v-else-if="orderData.couponCount==0">无优惠券可用</view>
					<uni-icon @tap="choiseCoupon()" type="arrowright" style="margin-left: 15upx;" color="3888888" size="20"></uni-icon>
				</view>
			</view>
			<view class="amount_item margin" style="padding-top: 10upx;">
				<view style="color: #555555;">配送方式</view>
				<view style="color: #888888;">快递免邮</view>
			</view>
			<view class="amount_item">
				<view style="color: #555555;">商品金额</view>
				<view style="color: #333333;">+￥{{orderData.totalAmount}}</view>
			</view>
			<view class="amount_item">
				<view style="color: #555555;">优惠金额</view>
				<view style="color: #333333;">-￥{{orderData.couponAmount}}</view>
			</view>
			<view class="amount_item" style="padding-bottom: 10upx;">
				<view style="color: #555555;">获取积分</view>
				<view style="color: #333333;">{{orderData.integral}}</view>
			</view>

			<view style="padding: 0 30upx;box-sizing: border-box;margin-top: 30upx;background-color: #FFFFFF;height:100upx;align-items: center;">
				<view style="color: #555555;width: 120upx;">留言</view>
				<input v-model="remark" placeholder="给商家留言" />
			</view>
			<view style="height: 50upx;"></view>
		</scroll-view>


		<view class="bottom">
			<view class="bottom_text">
				<view style="color: #888888;">
					应付金额
				</view>
				<view style="margin-left: 30upx;color: #FE0036;font-size: 32upx;font-weight: 600;">
					￥{{orderData.actualAmount}}
				</view>
			</view>
			<view class="bt_pay" @tap="pay()">立即支付</view>
		</view>
	</view>
</template>

<script>
	import api from '../../common/api.js';
	import {
		getWithParam_,
		get_
	} from '../../common/request.js';
	import uniIcon from '../../components/uni-icon.vue';
	import {
		parseParam
	} from '../../common/util.js';
	export default {
		components: {
			uniIcon
		},
		data() {
			return {
				remark: "",
				load: false,
				address: {},
				orderData: [],
				open: -1,
				param: {},
				couponId: null,
				cartId: null,
				skuId: null,
				count: null
			}
		},
		onLoad(option) {
			console.log(option)
			this.param = option
			let addressId = option.addressId
			this.couponId = option.couponId
			let cartId = option.cartId
			if (cartId != null) {
				this.cartId = cartId
				let p = {}
				p.cartId = cartId
				if (this.couponId != null) {
					p.couponId = this.couponId
				}
				if (addressId != null) {
					p.addressId = addressId
				}
				getWithParam_(api.ORDER_CART_TO, p).then(res => {
					if (res.data != null) {
						this.orderData = res.data
						this.address = res.data.userAddress
						this.load = true
					}
				})
			} else {
				let skuId = option.skuId
				let count = option.count
				this.skuId = skuId
				this.count = count
				let p = {}
				p.skuId = skuId
				p.count = count
				if (this.couponId != null) {
					p.couponId = this.couponId
				}
				if (addressId != null) {
					p.addressId = addressId
				}

				getWithParam_(api.ORDER_TO, p).then(res => {
					if (res.data != null) {
						this.orderData = res.data
						this.address = res.data.userAddress
						this.load = true
					}
				})

			}


		},
		methods: {
			pay() {
				let p = {}
				p.remark = this.remark
				if (this.cartId != null) {
					p.cartId = this.cartId
					if (this.couponId != null) {
						p.couponId = this.couponId
					}
					p.addressId = this.address.id
					getWithParam_(api.PAY_CART, p).then(res => {
						console.log(res.data)
					})
				} else {
					p.skuId = this.skuId
					p.count = this.count
					if (this.couponId != null) {
						p.couponId = this.couponId
					}
					p.addressId = this.address.id
					getWithParam_(api.PAY_TO, p).then(res => {
						console.log(res.data)
					})
				}

			},
			choiseCoupon() {
				uni.navigateTo({
					url: "../coupon/ChoiceCoupon?" + parseParam(this.param)
				})
			},

			goAddress() {
				uni.navigateTo({
					url: "../own/address?" + parseParam(this.param)
				})
			},
			op(index) {
				if (index == this.open) {
					this.open = -1
				} else {
					this.open = index
				}
			}
		}
	}
</script>

<style>
	.address-text-detail{
		font-size: 24upx;
		color: #555555
	}
	.amount_item {
		height: 60upx;
		align-items: center;
		justify-content: space-between;
		background-color: #FFFFFF;
		padding: 0 30upx;
	}

	.margin {
		margin-top: 20upx;
	}

	.address_4 {
		color: #888888;
		justify-content: center;
		align-items: center;
		height: 100upx;
		width: 500upx;
	}

	.scroll {
		height: calc(100vh - 100upx);
		width: 750upx;
		flex-direction: column;
	}

	.bottom_text {
		flex: 1;
		padding-right: 50upx;
		box-sizing: border-box;
		justify-content: flex-end;
		align-items: center;
	}

	.bt_pay {
		width: 30%;
		height: 100%;
		background-image: linear-gradient(to right, #FE0036, #FF6666);
		align-items: center;
		justify-content: center;
		color: #FFFFFF;
		font-size: 35upx;
		font-weight: 600;
	}

	.bottom {
		height: 100upx;
		width: 750upx;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #FFFFFF;
		z-index: 100;
		border-top: 1px solid #F2F3F5;
	}

	.item_text_2 {
		color: #FFFFFF;
		background-color: #FE0036;
		padding: 10upx 15upx;
		box-sizing: border-box;
		border-radius: 10upx;
		font-size: 24upx;
	}

	.item_1 {
		align-items: center;
	}

	.item_text_1 {
		color: #333333;
	}

	.item {
		height: 100upx;
		padding: 0 30upx;
		box-sizing: border-box;
		align-items: center;
		justify-content: space-between;
		background-color: #FFFFFF;
	}

	.order_item_5 {
		font-size: 32upx;
		color: #FE0036;
		font-weight: 600;
		margin-top: 30upx;
	}

	.order_item_3 {
		width: 350upx;
		align-items: center;
	}

	.order_item_4_ {
		color: #888888;
		width: 300upx;
		font-size: 24upx;
		padding: 10upx 0upx;
		box-sizing: border-box;
	}

	.order_item_4 {
		color: #888888;
		width: 300upx;
		font-size: 24upx;
		padding: 10upx 0upx;
		box-sizing: border-box;
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.order_item_2 {
		width: 350upx;
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #333333;
		font-weight: 600;
	}

	.order_item_1 {
		justify-content: space-between;
		align-items: flex-start;
		margin-left: 30ux;
	}

	.order_item {
		background-color: #FFFFFF;
		padding: 30upx 30upx;
		box-sizing: border-box;
		width: 100%;
		border-bottom: 1px solid #F2F3F5;
	}

	.address {
		width: 100%;
		padding: 30upx 30upx 0 30upx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		justify-content: space-between;
		align-items: center;
	}

	.address_1 {
		width: 500upx;
		flex-direction: column;
	}

	.address_text_1 {
		color: #333333;
		font-size: 32upx;
	}

	.address_text_2 {
		color: #333333;
		font-size: 28upx;
	}

	.address_text_3 {
		margin-top: 20upx;
		color: #555555;
		font-size: 24upx;
	}

	.address_icon {
		width: 100upx;
		height: 100%;
		justify-content: center;
		color: #888888;
	}
</style>
